<template>
    <div>
        <div style="margin-top: 10px">
            <el-button type="primary" icon="el-icon-plus" @click="showAddCarriersView">填写货运单</el-button>
        </div>
        <div style="margin-top: 10px">
            <el-table
                    :data="carriers"
                    stripe
                    border
                    width="100%">
                <el-table-column fixed width="100" prop="carriersid" label="运单编号"></el-table-column>
                <el-table-column fixed width="100" prop="sendcompany" label="发货单位"></el-table-column>
                <el-table-column width="100" prop="sendaddress" label="发货地址"></el-table-column>
                <el-table-column width="100" prop="sendlinkman" label="发货人"></el-table-column>
                <el-table-column width="100" prop="sendphone" label="发货人电话"></el-table-column>
                <el-table-column width="100" prop="receivecompany" label="收货单位"></el-table-column>
                <el-table-column width="100" prop="fkReceiveaddress" label="收货地址"></el-table-column>
                <el-table-column width="100" prop="receivelinkman" label="收货人"></el-table-column>
                <el-table-column width="100" prop="receivephone" label="收货人电话"></el-table-column>
                <el-table-column width="100" prop="leaverdate" label="承运日期"></el-table-column>
                <el-table-column width="100" prop="receivedate" label="收货日期"></el-table-column>
                <el-table-column width="100" prop="finishedstate" label="订单状态"></el-table-column>
                <el-table-column width="100" prop="insurancecost" label="保险费"></el-table-column>
                <el-table-column width="100" prop="transportcost" label="运费"></el-table-column>
                <el-table-column width="100" prop="othercost" label="其他费用"></el-table-column>
                <el-table-column width="100" prop="totalcost" label="总费用"></el-table-column>
                <el-table-column width="100" prop="fkUserid" label="业务员"></el-table-column>
                <el-table-column width="150" prop="checkintime" label="录入时间"></el-table-column>
                <el-table-column width="100" prop="remark" label="备注"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary">编辑</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <el-dialog
                title="货运单填写操作菜单"
                :visible.sync="dialogVisible"
                width="50%">
            <div>
                <table>
                    <tr>
                        <td>发货单位</td>
                        <td>
                            <el-input v-model="carrier.sendcompany" placeholder="请输入发货单位..."></el-input>
                        </td>
                        <td>发货地址</td>
                        <td>
                            <el-input v-model="carrier.sendaddress" placeholder="请输入发货地址..."></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>发货人</td>
                        <td>
                            <el-input v-model="carrier.sendlinkman" placeholder="请输入发货人..."></el-input>
                        </td>
                        <td>发货人电话</td>
                        <td>
                            <el-input v-model="carrier.sendphone" placeholder="请输入发货人电话..."></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>收货单位</td>
                        <td>
                            <el-input v-model="carrier.receivecompany" placeholder="请输入收货单位..."></el-input>
                        </td>
                        <td>收货地址</td>
                        <td>
                            <el-input v-model="carrier.fkReceiveaddress" placeholder="请输入收货地址..."></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>收货人</td>
                        <td>
                            <el-input v-model="carrier.receivelinkman" placeholder="请输入收货人..."></el-input>
                        </td>
                        <td>收货人电话</td>
                        <td>
                            <el-input v-model="carrier.receivephone" placeholder="请输入收货人电话..."></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>承运日期</td>
                        <td width="120px">
                            <el-date-picker
                                    v-model="carrier.leaverdate"
                                    type="date"
                                    value-format="yyyy-MM-dd HH:mm:dd"
                                    placeholder="承运日期">
                            </el-date-picker>
                        </td>
                        <td>收货时间</td>
                        <td>
                            <el-date-picker
                                    v-model="carrier.receivedate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="收货时间">
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>完成情况</td>
                        <td>
                            <el-radio-group v-model="carrier.finishedstate" size="mini">
                                <el-radio-button :label="0">待调度</el-radio-button>
                                <el-radio-button :label="1">已调度</el-radio-button>
                                <el-radio-button :label="2">已签收</el-radio-button>
                                <el-radio-button :label="3">已结算</el-radio-button>
                            </el-radio-group>
                        </td>
                        <td>保险费</td>
                        <td>
                            <el-input v-model.number="carrier.insurancecost" placeholder="请输入保险费..."></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>运费</td>
                        <td>
                            <el-input v-model.number="carrier.transportcost" placeholder="请输入运费..."></el-input>
                        </td>
                        <td>其他费用</td>
                        <td>
                            <el-input v-model.number="carrier.othercost" placeholder="请输入其他费用..."></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>合计费用</td>
                        <td>
                            <el-input v-model.number="totalCost" placeholder="请输入合计费用..."></el-input>
                        </td>
                        <td>备注</td>
                        <td>
                            <el-input v-model="carrier.remark" placeholder="请输入备注..."></el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddCarrier">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import {getRequest} from "../../utils/api";
    import {postRequest} from "../../utils/api";

    export default {
        name: "CarrierTask",
        data() {   /*变量声明*/
            return {
                dialogVisible: false,
                carriers: [],  /*承运信息*/
                carrier: {  /*添加承运数据所需变量*/
                    carriersid: '',
                    sendcompany: '',
                    sendaddress: '',
                    sendlinkman: '',
                    sendphone: '',
                    receivecompany: '',
                    fkReceiveaddress: '',
                    receivelinkman: '',
                    receivephone: '',
                    leaverdate: '',
                    receivedate: '',
                    finishedstate: 0,
                    insurancecost: 0,
                    transportcost: 0,
                    othercost: 0,
                    totalcost: 0,
                    remark: '',
                    fkUserid: '',
                    checkintime: ''
                }
            }
        },
        mounted() {  /*方法调用*/
            this.initCarriers();
        },
        computed: {
            totalCost() {
                let total = this.carrier.insurancecost + this.carrier.transportcost + this.carrier.othercost;
                this.carrier.totalcost = total;
                return total;
            }
        },
        methods: {   /*方法处理*/

            /*承运单添加*/
            doAddCarrier() {
                postRequest("/carriers/",this.carrier).then(resp=>{
                    if (resp) {
                        this.initCarriers();
                        this.dialogVisible = false;
                    }
                })
            },
            showAddCarriersView() {     /*展示所有承运单信息*/
                this.dialogVisible = true;
            },
            initCarriers() { /*所有数据*/
                getRequest('/carriers/').then(resp => {
                    if (resp) {
                        this.carriers = resp.data;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>